<template>
	<view class="sku-selector">
		<view class="sku-selector-section" v-for="spec in specs" :key="spec.name">
			<text class="sku-selector-title">{{ spec.name }}</text>
			<view class="sku-selector-options">
				<view class="sku-selector-option" v-for="option in spec.options" :key="option"
					:class="{ active: selectedSpecs[spec.name] === option }"
					@click="selectSpec(spec.name, option)">
					{{ option }}
				</view>
			</view>
		</view>

		<view class="sku-selector-section">
			<view class="sku-selector-quantity">
				<text class="sku-selector-title">数量</text>
				<view class="quantity-control">
					<view class="quantity-btn" @click="changeQuantity(-1)">-</view>
					<input class="quantity-input" type="number" v-model="quantityValue" @change="validateQuantity" />
					<view class="quantity-btn" @click="changeQuantity(1)">+</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

// 接收父组件传递的参数
const props = defineProps({
	specs: {
		type: Array,
		required: true
	},
	initialSelectedSpecs: {
		type: Object,
		default: () => ({})
	},
	initialQuantity: {
		type: Number,
		default: 1
	}
});

// 向父组件暴露事件
const emit = defineEmits(['update:selectedSpecs', 'update:quantity', 'spec-change']);

// 内部状态
const selectedSpecs = ref({...props.initialSelectedSpecs});
const quantityValue = ref(props.initialQuantity);

// 监听初始值变化
watch(() => props.initialSelectedSpecs, (newVal) => {
	selectedSpecs.value = {...newVal};
});

watch(() => props.initialQuantity, (newVal) => {
	quantityValue.value = newVal;
});

// 选择规格
const selectSpec = (specName, option) => {
	selectedSpecs.value[specName] = option;
	emit('update:selectedSpecs', {...selectedSpecs.value});
	emit('spec-change', specName, option);
};

// 改变数量
const changeQuantity = (delta) => {
	const newValue = quantityValue.value + delta;
	if (newValue >= 1 && newValue <= 99) {
		quantityValue.value = newValue;
		emit('update:quantity', newValue);
	}
};

// 验证数量输入
const validateQuantity = () => {
	if (quantityValue.value < 1) quantityValue.value = 1;
	if (quantityValue.value > 99) quantityValue.value = 99;
	emit('update:quantity', quantityValue.value);
};
</script>

<style lang="scss" scoped>
.sku-selector {
	&-section {
		margin-bottom: 20px;
	}

	&-title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 12px;
		display: block;
		color: #333;
	}

	&-options {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	&-option {
		padding: 8px 15px;
		border: 1px solid #ddd;
		border-radius: 20px;
		font-size: 14px;
		color: #333;
		background-color: #f8f8f8;
		transition: all 0.2s ease;

		&.active {
			color: #fff;
			border-color: #ff6a6a;
			background-color: #ff6a6a;
		}
	}

	&-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.quantity-control {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

	.quantity-btn {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		font-size: 18px;
		font-weight: bold;
		color: #666;
	}

	.quantity-input {
		width: 50px;
		height: 36px;
		text-align: center;
		border: none;
		border-left: 1px solid #eee;
		border-right: 1px solid #eee;
		font-size: 15px;
	}
}
</style>